.hhao{
    background-color: rgb(231, 231, 231);
    width: 100vw;
    height: 100vh;
    padding-bottom: 50vh;
    .top {
        width: 100vw;
        height: 6vh;
        background-color: white;
        border-bottom: 1px solid gainsboro;
        h3 {
            margin: 10px;
            width: 30vw;

        }
    }
    .list {
        display: flex;
        width: 100vw;
        height: 7vh;
        line-height: 7vh;
        justify-content: space-around;
        background-color: white;
        .pps{
            flex: 1;
            text-align: center;
        }
        .ppsactive {
            text-align: center;
            flex: 1;
            border-bottom: rgb(24, 143, 255) solid 1px;
            color: rgb(24, 143, 255);
        }
    }
    .bottom_info{
        width: 100vw;
        margin-top: 2vh;
        height: 35vh;
        .infolist{
            margin: 2vh auto;
            background-color: white;
            height: 35vh;
            width: 100vw;
            box-sizing: border-box;
            .tops{
                box-sizing: border-box;
                width: 100vw;
                padding: 10px 0;
                text-align: right;
            }
            .spans{
                margin-right:30px;
                height: 5vh;
                line-height: 5vh;
                color: red;
            }
            .center{
                width: 90vw;
                margin: 0 auto;
                box-sizing: border-box;
                margin-left: 20px;
                border-bottom: 1px solid gainsboro;
                p{
                    margin: 7px auto;
                    span{
                        color: red;
                        margin-left: 20px;
                    }
                }
            }
            .bottom{
                p{
                    text-align: right;
                    margin: 20px ;
                }
            }
        }
    }
}